/* 公众号留言 */
<template>
	<div class="comments">
		<h2>推文评论区设置</h2>
		<div class="table-container">
			<el-table
				ref="table"
				:data="tweetes"
			>
				<el-table-column
					label="创建时间"
					width="100px"
					prop="createTime"
					align="center"
				/>
				<el-table-column
					align="center"
				>
					<!-- 输入框必须加slot-scope才能输入，所有用一个:data解决eslint报错 -->
					<template
						slot="header"
						slot-scope="scope"
					>
						<div
							class="title-search"
							:data="scope"
						>
							推文标题
							<el-input
								type="text"
								placeholder="根据标题筛选, 按回车搜索"
								size="small"
								@keyup.enter.native="getTweets(1)"
								v-model="searchKeyword"
							/>
						</div>
					</template>
					<template slot-scope="scope">
						<el-input
							type="text"
							placeholder="输入推文标题"
							size="small"
							@blur="putTweet(scope.row)"
							v-model="scope.row.title"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="推文内容"
					align="center"
				>
					<template slot-scope="scope">
						<el-input
							type="textarea"
							placeholder="输入推文内容, 可以从小程序编辑器中编写后粘贴"
							size="small"
							resize='none'
							@blur="putTweet(scope.row)"
							v-model="scope.row.content"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="right"
				>
					<template	slot="header">
						<el-button
							size="mini"
							icon="el-icon-circle-plus"
							@click="onclicAddTweet"
						>
							增加新评论区
						</el-button>
					</template>
					<template slot-scope="scope">
						<el-button
							size="mini"
							round
							@click="onclickRead(scope.row)"
						>
							查看内容样式
						</el-button>
						<el-button
							size="mini"
							type="primary"
							round
							@click="onclickCopy(scope.row)"
						>
							复制地址
						</el-button>
						<el-button
							class="remove-btn"
							size="mini"
							type="danger"
							circle
							icon="el-icon-delete-solid"
							@click="onclickDel(scope.row)"
						/>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="getTweets"
				/>
			</div>
		</div>

		<IntroCard
			v-if="readTweet"
			:title="readTweet.title"
			:html="readTweet.html"
			@close="readTweet=null"
		/>
	</div>
</template>

<script>
import {
  getAllDiscussions,
  getDiscussion,
  postDiscussion,
  putDiscussion,
  deleteDiscussion
} from '@operation/api/tweet'
import { copyData } from '@/utils/tools'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'TweetComments',
    },
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 0,
      searchKeyword: '',
      tweetes: [],
      readTweet: null
    }
  },
  created() {
    this.getTweets(1)
  },
  methods: {
    /**
		 * 分页加载推文
		 */
    getTweets(pageNum = this.pageNum) {
      this.$loadingFn(async() => {
        const res = (await getAllDiscussions({
          pageNum,
          pageSize: this.pageSize,
          keyWords: this.searchKeyword
        })).data

        this.pageNum = pageNum

        const data = await Promise.all(res.pageData.map(item => getDiscussion(item.id)))

        this.tweetes = data.map(item => {
          item = item.data
          return {
            ...item,
            createTime: moment(item.createTime).format('YYYY/MM/DD HH:mm:ss')
          }
        })
        console.log(this.tweetes)
      })
    },
    /**
		 * 点击添加推文
		 */
    async onclicAddTweet() {
      await this.$loadingFn(async() => {
        await postDiscussion({
          title: '',
          content: '',
          tagId: 0
        })
        this.$success('创建成功')
      })
      this.getTweets(1)
    },
    /**
		 * 更新推文内容
		 */
    putTweet(row) {
      putDiscussion({
        postId: row.id,
        title: row.title,
        tagId: 0,
        content: row.content,
      })
    },
    /**
		 * 点击查看内容，打开md解析弹窗
		 */
    onclickRead(row) {
      this.readTweet = {
        title: row.title,
        html: row.content
      }
    },
    /**
     * 点击复制
     */
    onclickCopy(row) {
      copyData(`/pages/Entry?scheme=forumDetail^id:${ row.id }`)
    },
    /**
		 * 点击删除
		 */
    onclickDel(row) {
      this.$confirm('确认删除该评论区？请确认该条数据是推文评论区，不要误删了用户的帖子！', async() => {
        await this.$loadingFn(async() => {
          await deleteDiscussion(row.id)
          this.$warn('删除成功! ')
        })
        this.getTweets(1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.comments {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .title-search {
    display: flex;
    align-items: center;

    .el-input {
      width: 200px;
      margin-left: 15px;
    }
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
